<template>
  <div class="charts" style="color: #000; width: 100%; height: 100%;">
    <div ref="brokenChartRef" style="height:100%;"></div>
  </div>
</template>
<script>
// 分配饼图:参考地址 http://gallery.echartsjs.com/editor.html?c=xBJ06lIMUQ
// const echarts = resolve => require(['echarts'], resolve) // 请使用懒加载
import echarts from 'echarts'
import { on, off } from '@/utils/util';
export default {
  data () {
    return {
      myChart: null
    };
  },
  props: {
    xAxisData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    seriesData: {
      default: function () {
        return [];
      }
    },
    tooltipFormatter: {
      type: String,
      default: null
    },
    // 图表标题
    chartTitle: {
      type: String,
      default: ''
    },
    // 折线图折线颜色
    chartColor: {
      type: Array,
      default: function () {
        return ['#0067e1', '#75beff', '#23cbab', '#fed500'];
      }
    },
    // x轴刻度字体大小
    xLabelSize: {
      type: String,
      default: '12'
    },
    axisLabelFormatter: { // x轴数据的自定义格式
      type: String,
      default: '{value}'
    },
    isOpenBg: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: Array,
      default: []
    }
  },
  watch: {
    seriesData () {
      this.againCanvas();
    }
  },
  computed: {
    option () {
      let seriesArr = []
      let seriesItem = {
        name: '',
        type: 'line',
        data: [],
        animationEasing: 'cubicInOut',
        animationDuration: 1500,
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.bgColor[0] || 'trasparent'
                },
                {
                  offset: 1,
                  color: this.bgColor[1] || 'trasparent'
                }
            ])
        },
      }

      this.seriesData.forEach((e, idx) => {
          let item = JSON.parse(JSON.stringify(seriesItem))
          item.name = e.name || ''
          item.type = e.type || item.type
          item.data = e.data
          item.animationDuration = e.animationDuration || item.animationDuration
          seriesArr.push(item)
        })

      return {
        color: this.chartColor,
        title: {
          text: this.chartTitle,
          subtext: '',
          left: 'left',
          textStyle: {
            color: '#464646',
            fontSize: 16
          }
        },
        tooltip: {
          // trigger(触发类型)，可选'item','axis','none'
          trigger: 'axis',
          axisPointer: {
            // 指示器类型,可选'line','shadow','cross'
            type: 'shadow'
          },
          formatter: this.tooltipFormatter,
          textStyle: {
            align: 'left'
          }
        },
        grid: {
          top: '5%',
          right: '3%',
          bottom: '3%',
          left: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // boundaryGap: this.isOpenBg,
          data: this.xAxisData,
          // axisTick 坐标轴刻度相关设置
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          // axixLine 坐标轴轴线相关设置
          axisLine: {
            show: true,
            lineStyle: {
              color: '#F2F4F6'
            }
          },
          axisLabel: {
            color: '#B6BFCE',
            fontSize: this.xLabelSize,
            formatter: this.axisLabelFormatter
          },
        },
        yAxis: {
          type: 'value',
          // boundaryGap: this.isOpenBg? [0, '100%']: [],
          axisLabel: {
            show: true,
            color: '#4A4A4A',
            fontSize: this.yLabelSize
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#E9E9E9'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#F2F4F6'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: 'rgba(12, 156, 240, 0.2)'
            }
          }
        },
        series: seriesArr
      }
    }
  },
  methods: {
    // 重新画图
    againCanvas () {
      // this.myChart.clear();
      this.myChart.setOption(this.option, true);
      this.myChart.resize();
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.myChart = echarts.init(this.$refs['brokenChartRef']);
      this.myChart.setOption(this.option);
      on(window, 'resize', this.againCanvas);
    })

  },
  destroyed () {
    off(window, 'resize', this.againCanvas);
  }
}
</script>
